<template>
  <div id="app">
    <h3>案例：折叠面板</h3>
    <son />
    <son />
    <son />
  </div>
</template>

<script>
import son from '@/练习/组件/子组件'
export default {
  components: {
    son
  }
}
</script>

<style lang="less" scoped>
/**'
style身上加scoped属性
作用：让当前里面样式选择器只针对当前vue文件的标签生效，不会影响其他组件里的标签样式
原理：
1.打包标签是，会给所有的标签（组件根标签）都会加上一个data-v-hash值属性
2.所有css选择器加上[data-v-相同值hash值]属性


*/
body {
  background-color: #ccc;
  #app {
    width: 400px;
    margin: 20px auto;
    background-color: #fff;
    border: 4px solid blueviolet;
    border-radius: 1em;
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.5);
    padding: 1em 2em 2em;
    h3 {
      text-align: center;
    }
    // 如果这里面填写了要传入来的子组件样式，子组建没有写就要scoped，但是这个是测试页面，因此那个子组件我写了

    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .btn {
      /* 鼠标改成手的形状 */
      cursor: pointer;
    }
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 1px solid #ccc;
      padding: 0 1em;
    }
    .title h4 {
      line-height: 2;
      margin: 0;
    }
  }
}
</style>
